<template>
	<view class="tobepaid">
		<view class="title">
			<text>待支付总金额</text>
			<view>50.33<text>元</text></view>
		</view>
		<!-- 边框 -->
		<view class="com_border"></view>
		<view class="gh_info font-9c9c9d font15 gh_info_border">
			<text>就诊人</text>
			<view>何承阳</view>
		</view>
		<view class="gh_info font-9c9c9d font15 gh_info_border">
			<text>医生</text>
			<view>骨科 熊大</view>
		</view>
		<!-- 边框 -->
		<view class="com_border"></view>
		<view class="info">
			<view class="gh_info font-323232 font14 gh_info_border">
				<text>项目名称</text>
				<view>金额(元)</view>
			</view>
			<view class="gh_info font-9c9c9d font15" v-for="(item,index) in list" :key="index">
				<text>{{item.title}}</text>
				<view>{{item.money}}</view>
			</view>
		</view>
		<!-- 边框 -->
		<view class="com_border"></view>
		<!-- 确认支付 -->
		<view class="qx_button">
			<view bindtap="Onpayment" class="font-323232 font16">确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//数据
				list: [{
						title: '感冒药',
						money: '20.00'
					},
					{
						title: '葡萄糖液',
						money: '20.55'
					},
					{
						title: '感冒药',
						money: '20.00'
					},
					{
						title: '葡萄糖液',
						money: '20.55'
					}
				]
			}
		},
		onLoad: function(options) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff', // 必写项
				backgroundColor: '#6bcbb6', // 必写项
			})
		},
		methods: {

		}
	}
</script>

<style>
.tobepaid{
  padding-bottom: 200rpx;
}
/* 头部 */
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 30rpx;
  font-weight: bold;
  background-color: #6bcbb6;
  padding: 40rpx 30rpx;
}
/* 就诊信息 */
.info{
  padding: 30rpx 0;
}
.gh_title {
  margin-top: 30rpx;
  padding-left: 25rpx;
}

.gh_info {
  display: flex;
  justify-content: space-between;
  width: 750rpx;
  padding: 20rpx 25rpx;

}

.gh_info_border{
  border-bottom: 1rpx #eeeeee solid;
}

.gh_info view {
  width: 520rpx;
  text-align: right;
}

.margin_top {
  margin-top: 30rpx;
}

/* 提交 */
.qx_button{
  width: 750rpx;
  height: 120rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f9f9f9;
  z-index: 333;
}

.qx_button view{
  width: 650rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin-left: 50rpx;
  margin-top: 20rpx;
  background-color: #6bcbb6;
  color: #fff;
}
</style>
